<template>
  <div>
    <div v-if="noticeData">
      <div class="title mb-12px">公告</div>
      <Notice :data="noticeData" />
    </div>
    <div class="mt-12px" v-if="showWorkbench == 1">
      <div class="flex justify-between">
        <div class="title mb-12px">工作台 </div>
        <!-- <div>
          <el-radio-group v-model="time">
            <el-radio-button label="本日" value="本日" />
            <el-radio-button label="本周" value="本周" />
            <el-radio-button label="本月" value="本月" />
          </el-radio-group>
        </div> -->
      </div>
      <el-card shadow="never">
        <template #header>
          <div> 数据库数据资产 </div>
        </template>
        <div class="info-list">
          <div class="info-item">
            <div class="info-label"> 待确认 </div>
            <div class="info-value">
              {{ taskData.waitEnsureDbSource }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核中（新增） </div>
            <div class="info-value">
              {{ taskData.doingAuditDbSourceAdd }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核中（修改） </div>
            <div class="info-value">
              {{ taskData.doingAuditDbSourceEdit }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核通过 </div>
            <div class="info-value">
              {{ taskData.doingAuditDbSourcePass }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核拒绝 </div>
            <div class="info-value">
              {{ taskData.doingAuditDbSourceRefuse }}
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-20px">
        <template #header>
          <div> 文件资产 </div>
        </template>
        <div class="info-list">
          <div class="info-item">
            <div class="info-label"> 待确认 </div>
            <div class="info-value">
              {{ taskData.waitEnsureAssetMessage }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核中（新增） </div>
            <div class="info-value">
              {{ taskData.doingAuditAssetMessageAdd }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核中（修改） </div>
            <div class="info-value">
              {{ taskData.doingAuditAssetMessageEdit }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核通过 </div>
            <div class="info-value">
              {{ taskData.doingAuditAssetMessagePass }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label"> 审核拒绝 </div>
            <div class="info-value">
              {{ taskData.doingAuditAssetMessageRefuse }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="mt-20px w-100%">
      <DisplayChart ref="reportChartRef" @home-work-bench="homeWorkBench" @refresh-work="getTask" />
    </div>
  </div>
</template>

<script setup>
import Notice from './components/Notice.vue'
import DisplayChart from '@/views/report/display/index2.vue'
import { getNoticePage } from '@/api/system/notice/index'
import { getTaskStatistics } from '@/api/home/index'
import dayjs from 'dayjs'
const time = ref()
const reportChartRef = ref()
const noticeData = ref()
const getNotice = async () => {
  const { data } = await getNoticePage({ status: 0 })
  noticeData.value = data
}

const taskData = ref({
  waitEnsureDbSource: 0,
  doingAuditDbSourceAdd: 0,
  doingAuditDbSourceEdit: 0,
  doingAuditDbSourcePass: 0,
  doingAuditDbSourceRefuse: 0,
  waitEnsureAssetMessage: 0,
  doingAuditAssetMessageAdd: 0,
  doingAuditAssetMessageEdit: 0,
  doingAuditAssetMessagePass: 0,
  doingAuditAssetMessageRefuse: 0
})
const getTask = async (defaultTime = '', timeRange = []) => {
  console.log(console.log(reportChartRef.value))

  const times = []
  if (timeRange.length == 2) {
    timeRange.forEach((item, index) => {
      times[index] = dayjs(item).format('YYYY-MM-DD HH:mm:ss')
    })
  }
  const res = await getTaskStatistics({
    defaultTime,
    times
  })
  taskData.value = res
}

onMounted(() => {
  getNotice()
  getTask()
})

watchEffect(() => {
  console.log(reportChartRef.value?.defaultTime)
})
const showWorkbench = ref(0)
const homeWorkBench = (e) => {
  console.log('e', e)
  showWorkbench.value = e
}
</script>

<style scoped lang="scss">
.title {
  border-left: 6px solid #409eff;
  padding-left: 12px;
  font-weight: bold;
}
.info-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-label {
  font-weight: bold;
  font-size: 18px;
}
.info-value {
  margin-top: 8px;
  font-size: 16px;
}
</style>
